<template>
	<el-dialog :visible.sync="visible" v-dialogDrag :title="this.description" :close-on-click-modal="false" class="tl-dialog" width="1200px" @close="close" top="50px" :append-to-body="true" :modal-append-to-body="true">
		<el-form class="searchDialog" label-position="right" label-width="120px">
			<el-row>
				<el-col :span="7">
					<el-form-item label="问题分级" prop="qry_problemgrading">
						<el-select v-model="queryParam.qry_problemgrading" filterable clearable>
							<el-option v-for="item in codeModel.problemgradingList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="问题编号" prop="qry_docno">
						<el-input v-model.trim="queryParam.qry_docno" placeholder="问题编号" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="单据日期" prop="docdateSearch">
						<!-- <el-date-picker v-model="queryParam.qry_begindocdate" v-if="'asd'.at('qwe')" type="date" style="width:150px" value-format="yyyy-MM-dd" placeholder="开始时间" />至
						<el-date-picker v-model="queryParam.qry_enddocdate" type="date" style="width:160px" value-format="yyyy-MM-dd" placeholder="结束时间" /> -->
						<div class="date-pick">
							<el-date-picker v-model="docdateSearch" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="timeChange"> </el-date-picker>
						</div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="审批状态" prop="qry_state">
						<el-select v-model="queryParam.qry_state" filterable clearable>
							<el-option v-for="item in codeModel.stateList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="问题归属产品线" prop="qry_productline">
						<el-input v-model="queryParam.qry_productlinename" :disabled="true" class="tl-ref-selector">
							<el-button slot="append" type="primary" icon="el-icon-search" @click="openqemDutyDeptRefDialog('productline')"></el-button>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="牵头分析部门" prop="qry_dutydept">
						<el-input v-model="queryParam.qry_dutydeptname" :disabled="true" class="tl-ref-selector">
							<el-button slot="append" type="primary" icon="el-icon-search" @click="openqemDutyDeptRefDialog('dutydept')"></el-button>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="申请人" prop="qry_username">
						<tl-ref-user v-model="queryParam.qry_usercode" :initDisplayData.sync="queryParam.qry_username" dataType="code" :singleSelect="true"></tl-ref-user>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="风险排查负责人" prop="qry_riskman">
						<tl-ref-user v-model="queryParam.qry_riskmancode" :initDisplayData.sync="queryParam.qry_riskman" dataType="code" :singleSelect="true"></tl-ref-user>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="问题分析负责人" prop="qry_assayer">
						<tl-ref-user v-model="queryParam.qry_assayercode" :initDisplayData.sync="queryParam.qry_assayer" dataType="code" :singleSelect="true"></tl-ref-user>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="产品名称" prop="qry_productname">
						<el-input v-model.trim="queryParam.qry_productname" placeholder="产品名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="告警主题" prop="qry_warningtitle">
						<el-input v-model.trim="queryParam.qry_warningtitle" placeholder="告警主题" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="问题描述" prop="qry_problemdesc">
						<el-input style="width:300px" v-model.trim="queryParam.qry_problemdesc" placeholder="问题描述" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="信息途径" prop="qry_pathway">
						<el-select v-model="queryParam.qry_pathway" filterable clearable>
							<el-option v-for="item in codeModel.pathwayList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="IPD节点" prop="qry_ipdnode">
						<el-select v-model="queryParam.qry_ipdnode" filterable clearable>
							<el-option v-for="item in codeModel.ipdnodeList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="需求包" prop="qry_requirements">
						<ref-datacode-select v-model="queryParam.qry_requirements" :value="queryParam.qry_requirements" :dataplace="parseInt(0)" :isShowEnabled="false" datacode="QemProblemRequirements" @inputvalue="inputRequirements"></ref-datacode-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="是否重复发生" prop="qry_repeat">
						<el-select v-model="queryParam.qry_repeat" filterable clearable>
							<el-option v-for="item in codeModel.repeatList" :key="item.code" :label="item.name" :value="parseInt(item.code)" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="违反质量条款" prop="qry_whetherqualitypolicy">
						<el-select v-model="queryParam.qry_whetherqualitypolicy" filterable clearable>
							<el-option v-for="item in codeModel.repeatList" :key="item.code" :label="item.name" :value="parseInt(item.code)" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="问题发生环节" prop="qry_happennode">
						<ref-datacode-select v-model="queryParam.qry_happennode" :value="queryParam.qry_happennode" :dataplace="parseInt(2)" :isShowEnabled="false" datacode="QemProblemHappennode" @inputvalue="inputHappennode"></ref-datacode-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="是否作废" prop="qry_enabled">
						<el-select v-model="queryParam.qry_enabled" filterable clearable>
							<el-option v-for="item in codeModel.enabledList" :key="item.code" :label="item.name" :value="item.code" clearable />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="发生地" prop="qry_occurred">
						<el-input v-model.trim="queryParam.qry_occurred" placeholder="发生地" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="问题反馈人" prop="qry_feedbackpersoncode">
						<tl-ref-user v-model="queryParam.qry_feedbackpersoncode" :initDisplayData.sync="queryParam.qry_feedbackperson" dataType="code" :singleSelect="true"></tl-ref-user>
				</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="doSearch" icon="el-icon-search">搜索</el-button>
			<el-button type="primary" @click="doReset" :disabled="resetFlag" icon="el-icon-refresh-right">重置</el-button>
		</div>
		<!-- <tl-qemDutyDept-ref ref="TlQemDutyDeptRef" ></tl-qemDutyDept-ref> -->
		<DutyDeptRef ref="qemDutyDeptRef" @confirm="getqemDutyDeptRefData" @clearRef="clearRef" :isShowQryEnabled="this.isShowQryEnabled" :isProductline="this.isProductline"></DutyDeptRef>
	</el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
/** 子组件 */
import DutyDeptRef from '@/views/qms/qemDutyDept/refList'
import RefDatacodeSelect from '@/utils/RefDatacodeSelect'
/** 工具类 */
import { queryDataCode } from '@tapui/api/dataCode'
import { getAction, putAction, postAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
	name: 'tlHighSearch',
	components: { mixin_edit, DutyDeptRef, RefDatacodeSelect },
	mixins: [],
	data() {
		return {
			description: '高级搜索',
			visible: false,
			url: {},
			isShowQryEnabled: true,
			isProductline: false,
			docdateSearch: []
		}
	},
	props: {
		queryParam: {
			type: Object,
			default: function() {
				return {}
			}
		},
		codeModel: {
			type: Object,
			default: function() {
				return {}
			}
		},
		docdate: {
			type: Array
		}
	},
	computed: {
		query_Param() {
			return this.queryParam
		},
		// docdatehigh() {
		// 	return this.docdate
		// },
		resetFlag() {
			if (Object.keys(this.queryParam).length === 1) {
				return true
			} else {
				let flagVisible = true
				for (let key in this.queryParam) {
					let data = this.queryParam[key]
					if (data === 'query') {
						continue
					}
					if (data !== '' && data !== null && data !== undefined) {
						flagVisible = false
					}
				}
				return flagVisible
			}
		}
	},
	watch: {
		// query_Param: function(newV, oldV) {
		// 	this.$emit('update:queryParam', this.query_Param)
		// },
		docdateSearch: function(newV, oldV) {
			this.$emit('update:docdate', this.docdateSearch)
		},
		docdate: function(newV, oldV) {
			this.$set(this, 'docdateSearch', this.docdate)
		},
		deep: true
	},
	methods: {
		inputRequirements(val) {
			this.$set(this.queryParam, 'qry_requirements', val)
		},
		inputHappennode(val) {
			this.$set(this.queryParam, 'qry_happennode', val)
		},
		close() {
			// this.$emit('refresh')
		},
		doSearch() {
			this.visible = false
			this.$emit('refresh')
			// this.$emit('query')
		},
		doReset() {
			this.clearDocdate()
			this.$emit('reset')
		},
		clearDocdate() {
			this.$set(this, 'docdateSearch', [])
		},
		/** 打开责任部门参照 */
		openqemDutyDeptRefDialog(prop) {
			this.dutyRefProp = prop
			if (this.dutyRefProp === 'productline') {
				this.isProductline = true
			} else {
				this.isProductline = false
			}
			this.$refs.qemDutyDeptRef.visible = true
		},
		/** 获取责任部门参数数据 */
		getqemDutyDeptRefData(selectionRow, selectKey, selectionValue) {
			let code = selectionRow.code
			let name = selectionRow.name
			if (this.dutyRefProp === 'dutydept') {
				this.$set(this.queryParam, 'qry_dutydeptname', name)
				this.$set(this.queryParam, 'qry_dutydept', code)
			} else if (this.dutyRefProp === 'productline') {
				this.$set(this.queryParam, 'qry_productlinename', name)
				this.$set(this.queryParam, 'qry_productline', code)
			}
		},
		clearRef() {
			this.$refs.qemDutyDeptRef.visible = false
			if (this.dutyRefProp === 'dutydept') {
				this.$set(this.queryParam, 'qry_dutydeptname', '')
				this.$set(this.queryParam, 'qry_dutydept', '')
			} else if (this.dutyRefProp === 'productline') {
				this.$set(this.queryParam, 'qry_productlinename', '')
				this.$set(this.queryParam, 'qry_productline', '')
			}
		},
		timeChange(value) {
			if (value == null) {
				this.$set(this.queryParam, 'qry_begindocdate', '')
				this.$set(this.queryParam, 'qry_enddocdate', '')
			} else {
				this.$set(this.queryParam, 'qry_begindocdate', value[0])
				this.$set(this.queryParam, 'qry_enddocdate', value[1])
			}
		}
	}
}
</script>
<style lang="less">
.date-pick {
	.el-date-editor .el-range-separator {
		width: 10% !important;
	}
	.el-date-editor--daterange.el-input,
	.el-date-editor--daterange.el-input__inner,
	.el-date-editor--timerange.el-input,
	.el-date-editor--timerange.el-input__inner {
		width: 300px;
	}
}
.searchDialog {
	.el-input.is-disabled .el-input__inner {
	color: #606266 !important;
	}
}
.searchDialog {
	.el-input {
		width: 200px;
	}
}
</style>
<style lang="less" scoped>

</style>
